<template>
  <view
    class="tabs"
  >
    <scroll-view class="active-switch" scroll-x :scroll-into-view="id" scroll-with-animation>
      <view class="switch-container">
        <view
          v-for="(item,index) in tabList" :id="`tab_${index}`"
          :key="index"
          :class="['active-item',currentTab==index&&'focus',tabList.length==3&&'fix']"
          @tap="tabChange(index,item.id)"
        >
          <view class="item">{{ item.name }}</view>
        </view>
        <view
          class="focus-line"
          :class="[tabList.length==3&&'fix']"
          :style="{transform:transformX}"
        >
          <view class="line-item"/>
        </view>
      </view>
    </scroll-view>
    <view
      class="tab-pane-view"
      @touchstart="touchstart"
      @touchend="touchend"
    >
      <view
        class="tab-pane-group"
        :style="{transform:transformXx}"
      >
        <slot></slot>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'Tabs',
  props: {
    tabList: {
      default: () => {
        return []
      },
      type: Array
    },
    currentTab: {
      default: 0,
      type: Number
    }
  },
  data() {
    return {
      id: 'tab_0',
      start: 0
    }
  },
  computed: {
    transformX() {
      const currentTab = this.currentTab
      return `translate3d(${currentTab * 100}%, 0px, 0px)`
    },
    transformXx() {
      const currentTab = this.currentTab
      return `translate3d(-${currentTab * 100}%, 0px, 0px)`
    }
  },
  methods: {
    tabChange(index, sortId) {
      if (this.currentTab !== index) {
        this.$emit('tabs', index, sortId)
        // this.bus.$emit('tabs',index)  //事件，这里触发tabs事件
        this.id = `tab_${index}`
      }
    },
    touchstart(e) {
      this.start = e.touches[0].clientX
      this.$emit('touchLeft', this.currentTab)
    },
    touchend(e) {
      const end = e.changedTouches[0].clientX
      if (end - this.start > 10 && this.currentTab >= 1) {
        this.tabChange(this.currentTab - 1)
      } else if (this.start - end > 10 && this.currentTab < this.tabList.length - 1) {
        this.tabChange(this.currentTab + 1)
      }
    }
  }
}
</script>
<style>
.tabs {
  width: 100%;
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.tabs .active-switch {
  overflow: scroll;
}

.tabs .active-switch .switch-container {
  position: relative;
  display: flex;
  flex-direction: row;
}

.tabs .active-switch .switch-container .focus-line {
  flex: 1;
  width: 25%;
  /* width: 160upx; */
  position: absolute;
  bottom: 0;
  /* border-bottom: 4upx solid #fff; */
  transition: 0.3s;
}

.tabs .active-switch .switch-container .focus-line .line-item {
  width: 40%;
  border-bottom: 4 upx solid #1AA034;
  margin: 0 auto;
}

.tabs .active-switch .switch-container .focus-line.fix {
  width: 250 upx;
}

.tabs .active-switch .active-item {
  position: relative;
  min-width: 160 upx;
  width: 160 upx;
  flex: 1;
  height: 100 upx;
  transition: 0.3s;
  background-color: #fff;
  color: #333;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* border-bottom: 1upx solid rgba(0,0,0,0.5); */
}

.tabs .active-switch .active-item.focus {
  background: #fff;
  color: #1AA034;
  transition-duration: 0.3s;
}

.tabs .active-switch .active-item.fix {
  width: 250 upx;
}

.tabs .active-switch .active-item .item {
  padding: 0 5 upx;
  overflow: hidden;
  font-size: 28 upx;
}

.tabs .tab-pane-view {
  overflow: hidden;
  background-color: #fff;
  flex: 1;
}

.tabs .tab-pane-view .tab-pane-group {
  display: block;
  white-space: nowrap;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: 100%;
  overflow: visible;
  will-change: transform, left, top;
  min-height: 100 upx;
  height: 100%;
}

.tabs .tab-pane-view .tab-pane-group .tab-pane-item {
  width: 100%;
  min-height: 100 upx;
  display: inline-block;
  white-space: initial;
  vertical-align: top;
  font-size: 24 upx;
  box-sizing: border-box;
  overflow: auto;
}

</style>
